<template>
  <div :class="['title-box f-r a-c', size]">
    <div class="line" />
    <span class="title">{{ title }}</span>
  </div>
</template>

<script>
export default {
  name: 'TitleBox',
  props: {
    title: String,
    size: String
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.title-box {
  .line {
    width: 6px;
    height: 26px;
    background: #4880FF;
    border-radius: 4px 4px 4px 4px;
  }
  .title {
    font-size: 26px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    line-height: 27px;
    margin-left: 13px;
  }
}
.title-box.mini {
  .line {
    height: 16px;
  }
  .title {
    font-size: 16px;
    line-height: 16px;
  }
}
</style>
